<template>
	<view class="container">
		<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
		<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="addr"></view>
			<view class="input-box">
				
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- header -->
		<view class="header-bg">
			<view class="header-bg-view">
				<view class="header-top">
					<view class="top-left">
						<view class="user-face">
						<image class="header-pic" src="../../static/img/face.png" @tap="jumpToInfo()"></image>
						</view>
						<view class="user-info">
							<view  v-if="phone!='fail'">
								{{phone}}
							</view>
							<view class="user-name" @tap="loginBtn" v-else="" >
								点我登录
							</view>		
						</view>
						<view class="logout" v-if="phone!='fail'" @click="logout">退出登录</view>
						<view v-else></view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="order-view">
			<view class="order-top">
				
				<view class="order-top-item" @click="jumpToOrderList">
					<view class="img" >
						<image src="../../static/img/user/downOrder.png"></image>
					</view>
					<view class="order-text">买的订单</view>
				</view>
				<view class="order-top-item" >
					<view class="img">
						<image src="../../static/img/user/upOrder.png"></image>
					</view>
					<view class="order-text">卖的订单</view>
				</view>
			</view>
			
		</view>
		<view class="tool-view">
			
				<view class="box">
					<view class="text" @click="userMessage">个人设置</view>
					<view class="divider"/>
				</view>
				<view class="box">
					<view class="text" @click="seller">注册卖家</view>
					<view class="divider"/>
				</view>
				<view class="box">
					<view class="text" @click="contact">关于我们</view>
				</view>
			
		</view>
		<!-- 占位 -->
		<view class="place-bottom"></view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				phone:"",
				password:'',
				headerPosition:"fixed",
				headerTop:null,
				statusTop:null,
				showHeader:true,
				uid:0,
				
			};
		},
		
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
		},
		
		methods:{
			async getUserInfo(){
				const res = await this.$myRequest({
							url: '/user/getUserInfo'
							})
							console.log(res)
							this.phone=res.data[0]
							this.uid=res.data[1]
							this.password=res.data[2]
							console.log(this.password)
											
			},
			 
			jumpToOrderList(){
				uni.navigateTo({
					url:'../order/order?uid='+this.uid
				})
			},
			seller(){
				uni.navigateTo({
					url:'../seller/seller?uid='+this.uid
				})
			},
			userMessage(){
				uni.navigateTo({
					url:'./userMessage?phone='+this.phone+'&password='+this.password
				})
			},
			contact(){
				uni.navigateTo({
					url:'../contact/contact'
				})
			},			
			jumpToLoginEvent(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			loginBtn(){
				uni.navigateTo({
					url:'../login/login?phone='+this.phone
				})
			},
			async logout(){
				const res = await this.$myRequest({
								url: '/user/logout'
								})
								console.log(res)
								uni.navigateBack({
									url:''
								})	
				}
			
		},
		replace() {
			this.logout()
		},
		onShow() {
			this.getUserInfo()
			
		}
		
	}
</script>

<style lang="scss">
	
	page{position: relative;background-color: #fff;}
	
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #f06c7a;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);//覆盖样式
		/*  #endif  */
		
	}
	
	.header{
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f06c7a;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.icon-btn{
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.iconfont{
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
	.place{
		background-color: #f06c7a;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.place-bottom{
		height: 300upx;
	}
	
	.container{
		
	}
	.header-bg {
		height: auto;
		width: 100%;
		background-color: #f06c7a;
		background-size: 750rpx 100rpx;

		display: flex;
		flex-direction: column;
	}
	.header-bg-view {
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		.header-top {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.top-left {
				display: flex;
				margin-top: -85upx;
				flex-direction: row;
				.header-pic {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}
				.user-face{
					
				}
				.user-info {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					float: left;
				}
			}
			
			.qrcode {
				width: 70rpx;
				height: 70rpx;
			}	
			
		}
		.header-center {
			margin-top: 60rpx;
			margin-bottom: 40rpx;
			background: linear-gradient(to left, #dea96d 0%,#f6d59b 100%);
			box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.2);			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			border-radius: 10rpx;
			.center-left{
				
			}
		}
		
	}
	.order-view {
		margin: 20rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;
		width: 84%;
		box-shadow: 0rpx 0rpx 25rpx rgba(0,0,0,0.1);
		border-radius: 15rpx;
		.order-top{
			
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10rpx;
			border-bottom: solid 1upx #17e6a1;
			margin: 0rpx 10rpx;
			.order-top-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					height: 10.5vw;
					display: flex;
					justify-content: center;
					
					image{
						width: 9vw;
						height: 9vw;
					}
				}
				.order-text {
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
			
		}
		.order-bottom {
			margin-top: 10rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 70%;
				
				
				.box {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: left;
					height: 80rpx;
					
					
				}
			}
			
			.right {
				width: 30%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				height: 120rpx;
			
				.box {
					margin-top: 0rpx;
					
					
					.img {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						margin-top: 0rpx;
						.iconfont{
							font-size: 45rpx;
							color: #e78901;
						}
					}
				}
				
			}
		}
	}
	.tool-view {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0rpx 0rpx 25rpx rgba(0,0,0,0.1);
		border-radius:15rpx;

				.box{
					margin-top: 40upx;
				}
			}
.tool-view .box .text{
	margin-top: -20upx;
	width: 100%;
	display: flex;
	// justify-content: center;
	font-size: 26upx;
	color: #3d3d3d;
}		
.divider{
	 background: #E0E3DA;
	 width: 100%;
	 height: 1rpx;
	}

.logout{
	float: right;
	margin-left: 300upx;
}
</style>
